import React, { useState } from 'react'
import {COMMENTS} from './data'
import CommentList from './CommentList'

const CommentInput = ({comments,setComments}) => {
    const [user,setUser] = useState(initialState='')
    const [rating,setRating] = useState(initialState=0)
    const [comments,setComments] = useState(initialState='')
    const handleSubmit = () => {
        setComments([...CommentList,{
            id:Date.now,
            user,
            rating,
            comments:'Very Good!',
        }])
        setUser(value='')
        setRating(value=0)
        setComments(value='')
    }
    return (
        <div>
            <div>user:<input value={user} onChange={e => setUser(e.target.value)}/></div>
            <div>rating:<input value={rating} onChange={e => setRating(Number(e.target.value))}/></div>
            <div>comments:<input value={comments} onChange={e => setcemments(e.target.value)}/></div>
            <button onClick={handleSubmit}>submit</button>
        </div>
    )
}

export default CommentInput;
